<template>
	<view>
		<view class="def-bg">
			<view class="p-4">
				<view class="flex">
					<dating-avatar img="/static/logo.png"></dating-avatar>
					<view class="flex-1 px-4">
						<view class="p-0.5">码上致富</view>
						<view class="p-0.5">湖南·长沙·男·26岁</view>
						<view class="flex p-0.5">
							<view>ID:520131488</view>
							<view class="ml-1">复制</view>
						</view>
					</view>
					<view class="flex flex-col justify-center justify-items-center">
						<view>编辑资料</view>
					</view>
				</view>
				<view class="flex justify-between px-8">
					<view class="flex flex-col justify-center items-center justify-items-center">
						<view>1</view>
						<view>动态</view>
					</view>
					<view class="flex flex-col justify-center items-center justify-items-center">
						<view>1</view>
						<view>关注</view>
					</view>
					<view class="flex flex-col justify-center items-center justify-items-center">
						<view>1</view>
						<view>粉丝</view>
					</view>
				</view>
			</view>
		</view>
		<view class="px-4">
			<view class="flex justify-between mt-2 vip-box rounded-lg px-4">
				<view class="text-color-white flex justify-center justify-items-center items-center">
					<view class="iconfont iconfont-fellow icon-img-24"></view>
					<view>
						解锁会员，轻松聊天
					</view>
				</view>
				<view class="text-color-white flex justify-center justify-items-center items-center">立即开通</view>
			</view>
			<view class="flex justify-between mt-2">
				<view class="left-box">
					<image class="image-bg" src="/static/imgs/mine/bg1.png"></image>
					<view>10</view>
					<view>我的砖石</view>
				</view>
				<view class="right-box">
					<image class="image-bg" src="/static/imgs/mine/bg2.png"></image>
					<view>金豆充值</view>
					<view>限时特惠</view>
				</view>
			</view>
			<view class="flex justify-between def-bg p-5 mt-2 rounded-lg">
				<view class="flex flex-col justify-center justify-items-center items-center">
					<view class="iconfont iconfont-auth icon-img-24"></view>
					<view>我的认证</view>
				</view>
				<view class="flex flex-col justify-center justify-items-center items-center">
					<view class="iconfont iconfont-credit icon-img-24"></view>
					<view>我的信用</view>
				</view>
				<view class="flex flex-col justify-center justify-items-center items-center">
					<view class="iconfont iconfont-welfare icon-img-24"></view>
					<view>我的礼物</view>
				</view>
				<view class="flex flex-col justify-center justify-items-center items-center">
					<view class="iconfont iconfont-dynamic icon-img-24"></view>
					<view>我的动态</view>
				</view>
			</view>
			<view class="mt-2 def-bg">
				<u-list height="auto">
					<u-list-item>
						<u-cell title="任务中心">
							<text slot="icon" class="iconfont iconfont-task" style="width: 56rpx; height: 56rpx;" />
							<text slot="right-icon" class="iconfont iconfont-right"  style="width: 22px; height: 22px;" />
						</u-cell>
					</u-list-item>
					<u-list-item>
						<u-cell title="帮助反馈">
							<text slot="icon" class="iconfont iconfont-service" style="width: 56rpx; height: 56rpx;" />
							<text slot="right-icon" class="iconfont iconfont-right"  style="width: 22px; height: 22px;" />
						</u-cell>
					</u-list-item>
					<u-list-item>
						<u-cell title="设置">
							<text slot="icon" class="iconfont iconfont-setup" style="width: 56rpx; height: 56rpx;" />
							<text slot="right-icon" class="iconfont iconfont-right"  style="width: 22px; height: 22px;" />
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.image-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.vip-box{
	background: url('~@/static/imgs/mine/bg3.png');
	height:90rpx
}
.left-box{
	height: 100rpx;
	position: relative;
	flex: 1;
	z-index: 5;
	padding: 20rpx;
}
.right-box{
	height: 100rpx;
	position: relative;
    flex: 1;
    z-index: 5;
	margin-left: 10rpx;
	padding: 20rpx;
}
</style>
